<template>
	<view>
		<!-- 上面评论 -->
		<view class="ml30 mt30 mr30 flex u-border-bottom">
			<!-- 头像 -->
			<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.qqkou.com%2Fi%2F1a3050520038x1041074012b26.jpg&refer=http%3A%2F%2Fi.qqkou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639653789&t=b2ac1c6a41348c4e660429146ae5970e" class="w70 h70 radius70 mr20"></image>
			<!-- 右边 -->
			<view class="flex1 pb20 ">
				<!-- 上面 -->
				<view class="flex row-between mb20">
					<text class="fs28">潘巧</text>
					<text class="fs24 color9">昨天 14:32</text>
				</view>
				<!-- 中间 -->
				<view class="fs28 mb20">这是评论这是评论这是评论这是评论这是评论这是评论</view>
				<view class="flex commentimgBox row-between flex-wrap mb20">
					<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.qqkou.com%2Fi%2F1a3050520038x1041074012b26.jpg&refer=http%3A%2F%2Fi.qqkou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639653789&t=b2ac1c6a41348c4e660429146ae5970e" class=" radius16" mode="widthFix"></image>
					<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.qqkou.com%2Fi%2F1a3050520038x1041074012b26.jpg&refer=http%3A%2F%2Fi.qqkou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639653789&t=b2ac1c6a41348c4e660429146ae5970e" class=" radius16" mode="widthFix"></image>
					<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.qqkou.com%2Fi%2F1a3050520038x1041074012b26.jpg&refer=http%3A%2F%2Fi.qqkou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639653789&t=b2ac1c6a41348c4e660429146ae5970e" class="radius16" mode="widthFix"></image>
				</view>
				<view class="flex row-right color9 fs24">
					<view class="mr50">
						<text class="cuIcon-attention"></text>
						<text>3943</text>
					</view>
					<view class="mr50">
						<text class="cuIcon-comment"></text>
						<text>评论</text>
					</view>
					<view class="">
						<u-icon name="thumb-up"></u-icon>
						<u-icon name="thumb-up-fill" color="#D23030"></u-icon>
						<text>3</text>
					</view>
				</view>
			</view>
		</view>
		<!-- //上面评论盒子 -->
		
		<!-- 下面的评论列表 -->
		<view class="pl30 mt30">
			<view class="flex col-center mb30">
				<view class="w10 h28 radius6 bg-red mr10"></view>
				<text>评论(2943)</text>
			</view>
			
			<view class="ml30 mt30 mr30 flex mb30">
				<!-- 头像 -->
				<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.qqkou.com%2Fi%2F1a3050520038x1041074012b26.jpg&refer=http%3A%2F%2Fi.qqkou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639653789&t=b2ac1c6a41348c4e660429146ae5970e" class="w70 h70 radius70 mr20"></image>
				<!-- 右边 -->
				<view class="flex1 pb20 ">
					<!-- 上面 -->
					<view class="flex row-between mb20">
						<view class="">
							<text class="fs28">潘巧</text>
							<view class="fs24 color9 mt10">14:32</view>
						</view>
						<view class="">
							<u-icon name="thumb-up"></u-icon>
							<u-icon name="thumb-up-fill" color="#D23030"></u-icon>
						</view>
					</view>
					<!-- 中间 -->
					<view class="fs28 mb20">这是评论这是评论这是评论这是评论这是评论这是评论</view>
				</view>
			</view>
			
			<view class="ml30 mt30 mr30 flex mb30">
				<!-- 头像 -->
				<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.qqkou.com%2Fi%2F1a3050520038x1041074012b26.jpg&refer=http%3A%2F%2Fi.qqkou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639653789&t=b2ac1c6a41348c4e660429146ae5970e" class="w70 h70 radius70 mr20"></image>
				<!-- 右边 -->
				<view class="flex1 pb20 ">
					<!-- 上面 -->
					<view class="flex row-between mb20">
						<view class="">
							<text class="fs28">潘巧</text>
							<view class="fs24 color9 mt10">14:32</view>
						</view>
						<view class="">
							<u-icon name="thumb-up"></u-icon>
							<u-icon name="thumb-up-fill" color="#D23030"></u-icon>
						</view>
					</view>
					<!-- 中间 -->
					<view class="fs28 mb20">这是评论这是评论这是评论这是评论这是评论这是评论</view>
					<!-- 评论回复 -->
					<view class="pad15 fs24 radius10 replyBox">
						<view class="">
							<text class="color-red">帅哥王：</text>
							<text>这是一个回复这是一个回复</text>
						</view>
						<view class="mt30">
							<text class="color-red">帅哥王：</text>
							<text>这是一个回复这是一个回复</text>
						</view>
						<view class="mt30">
							<text class="color-red">帅哥王回复帅哥王：</text>
							<text>这是一个回复这是一个回复</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 下面的评论列表 -->
		
		<!-- 底部的输入评论 -->
		<view class="footerbtn pl40">
			<u-input v-model="value" type="text" :border="false" height='88' placeholder="请输入您的回复"/>
			<view class="combtn">确认</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:''
			};
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
.commentimgBox {
		image {
			width: 32%;
		}
	}
	.u-border-bottom {
		border-bottom: 10rpx solid #F5F5F5;
	}
	.replyBox {
		background-color: #F5F5F5;
	}
	.footerbtn {
		position: fixed;
		left: 50%;
		bottom: 50rpx;
		transform: translateX(-50%);
		width: 90%;
		height: 88rpx;
		background: #F5F5F5;
		border-radius: 44rpx;
		.combtn {
			position: absolute;
			top: 0;
			right: 0;
			width: 180rpx;
			height: 88rpx;
			background: #D23030;
			border-radius: 44rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
		}
	}
</style>
